<template>
  <Teleport to="body">
    <div class="loadingScreen" v-show="systemStore.loadDing">
      <Loading>
        <div v-colorText>Loading...</div>
      </Loading>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { Loading } from "@kjgl77/datav-vue3";
import { useSystemStore } from "@/stores/system";
const systemStore = useSystemStore();
</script>
<style scoped>
.loadingScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
</style>
